<template>
  <div>
    <!--卡片-->
    <el-card class="box-card">
      <!--定义面包屑-->
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>客户管理</el-breadcrumb-item>
        <el-breadcrumb-item>会员管理</el-breadcrumb-item>
      </el-breadcrumb>
      <el-divider></el-divider>
      <!--表单的搜索框
           :model="双向绑定表单的数据"
      -->
      <el-form :inline="true" :model="clientSelect"  class="demo-form-inline">
        <el-form-item >
          <el-input v-model="clientSelect.id" placeholder="请输入ID"></el-input>
        </el-form-item>
        <el-form-item >
          <el-input v-model="clientSelect.username" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item >
          <el-input v-model="clientSelect.name" placeholder="请输入会员名"></el-input>
        </el-form-item>
        <el-form-item >
          <el-input v-model="clientSelect.contactName" placeholder="请输入联系人名"></el-input>
        </el-form-item>
        <el-form-item >
          <el-input v-model="clientSelect.contactAddress" placeholder="请输入联系人地址"></el-input>
        </el-form-item>
        <el-form-item >
          <el-input v-model="clientSelect.address" placeholder="请输入地址"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="initUserTable">查询</el-button>
          <el-button type="primary" @click="add()" >添加</el-button>
<!--          <el-button type="primary" @click="" >发放优惠券</el-button>-->
<!--          <el-button type="primary" @click="" >发放积分</el-button>-->

        </el-form-item>
      </el-form>

      <!--数据表格-->
      <template>
        <el-table
            :data="tableData"
            :border="true"
            stripe
            style="width: 100%"
            @selection-change="handleSelectionChange"
        >
          <!--            height="666"-->
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              prop="id"
              label="会员id"
              fixed="left"
              width="95px"
              sortable
              >
          </el-table-column>
          <el-table-column
              prop="username"
              label="账号"
              fixed="left"
              width="120px"
              sortable
              >
          </el-table-column>
<!--          <el-table-column-->
<!--              prop="password"-->
<!--              label="会员密码"-->
<!--              show-overflow-tooltip="true"-->
<!--          >-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--              prop="pwSalt"-->
<!--              label="会员的盐">-->
<!--          </el-table-column>-->
          <el-table-column
              prop="status"
              label="状态"
              fixed="left"
              sortable
          >
            <template slot-scope="scope">
<!--              <el-tooltip :content="'Switch value: ' + scope.row.status" placement="top">-->
<!--              active-value=""选择的数据类型是字符串 :active-value="0"则是数字 -->
              <el-switch
                  v-model="scope.row.status"
                  active-color="#13ce66"
                  :active-value="0"
                  :inactive-value="1"
                  inactive-color="#ff4949"
                  @change="switchStatus(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
              prop="idType"
              label="证件类型"
              sortable>
          </el-table-column>
          <el-table-column
              prop="pathFront"
              label="正面"
              sortable>
            <template slot-scope="scope">
              <img  width="50px" height="50px" :src="scope.row.pathFront" />
            </template>
          </el-table-column>
          <el-table-column
              prop="pathReverse"
              label="反面"
              sortable>
            <template slot-scope="scope">
              <img  width="50px" height="50px" :src="scope.row.pathReverse" />
            </template>
          </el-table-column>
          <el-table-column
              prop="name"
              label="客户名字"
              sortable>
          </el-table-column>
          <el-table-column
              prop="contactName"
              label="联系人"
              sortable>
          </el-table-column>
          <el-table-column
              prop="contactPhone"
              label="联系电话"
              sortable>
          </el-table-column>
          <el-table-column
              prop="contactAddress"
              label="联系地址"
              sortable>
          </el-table-column>
          <el-table-column
              prop="licenseNo"
              label="驾照号"
              sortable>
          </el-table-column>
          <el-table-column
              prop="sex"
              label="性别"
              sortable>
            <template slot-scope="scope">
              <span v-if="scope.row.sex===0"><i class="el-icon-male"></i></span>
              <span v-if="scope.row.sex===1"><i class="el-icon-female"></i></span>
            </template>
          </el-table-column>
          <el-table-column
              prop="phoneNum"
              label="电话"
              sortable>
          </el-table-column>
          <el-table-column
              prop="address"
              label="地址"
              sortable>
          </el-table-column>
          <el-table-column
            prop="email"
            label="邮箱"
            sortable>
          </el-table-column>
          <el-table-column
              prop="levelId"
              label="会员等级"
              sortable>
          </el-table-column>
          <el-table-column
              prop="levelId"
              label="会员级别"
              sortable>
            <template slot-scope="scope">
              <span v-for="(item,index) in levels" >
                <span v-if="index<levels.length-1">
                   <span v-if="scope.row.levelId>=item.id&&scope.row.levelId<levels[index+1].id">
                    {{item.name}}
                   </span>
                </span>
                <span v-else-if="scope.row.levelId>=levels[levels.length-1].id">
                  {{item.name}}
                  </span>
              </span>
            </template>
          </el-table-column>
          <el-table-column
              prop="accountBalance"
              label="账户余额"
              sortable>
          </el-table-column>
          <el-table-column
              prop="integration"
              label="积分"
              sortable>
          </el-table-column>
          <el-table-column
              prop="growth"
              label="成长值"
              sortable>
          </el-table-column>
          <el-table-column
              prop="historyIntegration"
              label="历史积分数量"
              sortable>
          </el-table-column>
          <el-table-column
              prop="headPic"
              label="头像"
              sortable>
            <template slot-scope="scope">
              <img  width="50px" height="50px" :src="scope.row.headPic" />
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="180px">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" circle @click="updateClient(scope.row)"></el-button>
              <el-button type="danger" icon="el-icon-delete"  circle  @click="open(scope.row.id)"></el-button>
<!--              <el-button type="warning" icon="el-icon-star-off" circle @click="showUserRole(scope.row.userId)"></el-button>-->
            </template>
          </el-table-column>
        </el-table>

        <!--分页-->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </template>
    </el-card>
    <el-dialog
        :title="titleName"
        :visible.sync="fenRoleDialog"
        width="30%"
    >
      <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" label-width="100px" class="demo-ruleForm">
        <el-form-item label="会员id" prop="id" style="display: none">
          <el-input v-model="ruleForm.id" ></el-input>
        </el-form-item>
        <el-form-item label="会员账号" prop="username">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="证件类型" prop="idType">
          <el-radio-group v-model="ruleForm.idType">
<!--            (身份证，护照，军官证，台胞证，港澳台来往内地通行证)-->
            <el-radio label="身份证" value="身份证"></el-radio>
            <el-radio label="护照" value="护照"></el-radio>
            <el-radio label="军官证" value="军官证"></el-radio>
            <el-radio label="台胞证" value="军官证"></el-radio>
            <el-radio label="港澳台来往内地通行证" value="港澳台来往内地通行证"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="正面" prop="pathFront">
          <oss ref="oss1" :imgurl.sync="ruleForm.pathFront"></oss>
        </el-form-item>
        <el-form-item label="反面" prop="pathReverse">
          <oss ref="oss2" :imgurl.sync="ruleForm.pathReverse"></oss>
        </el-form-item>
        <el-form-item label="客户名字" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="contactName">
          <el-input v-model="ruleForm.contactName"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="contactPhone">
          <el-input v-model.number="ruleForm.contactPhone"></el-input>
        </el-form-item>
        <el-form-item label="联系地址" prop="pathFront">
          <el-input v-model="ruleForm.contactAddress"></el-input>
        </el-form-item>
        <el-form-item label="驾照号" prop="licenseNo">
          <el-input v-model="ruleForm.licenseNo"></el-input>
        </el-form-item>
        <el-form-item label="会员等级" prop="levelId">
          <el-input v-model.number="ruleForm.levelId"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="ruleForm.sex">
            <el-radio :label="0" >男</el-radio>
            <el-radio :label="1" >女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="电话" prop="phoneNum">
          <el-input v-model.number="ruleForm.phoneNum"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>
        <el-form-item label="账户余额" prop="accountBalance">
          <el-input v-model.number="ruleForm.accountBalance"></el-input>
        </el-form-item>
        <el-form-item label="积分" prop="integration">
          <el-input v-model.number="ruleForm.integration"></el-input>
        </el-form-item>
        <el-form-item label="成长值" prop="growth">
          <el-input v-model.number="ruleForm.growth"></el-input>
        </el-form-item>
        <el-form-item label="历史积分数量" prop="historyIntegration">
          <el-input v-model.number="ruleForm.historyIntegration"></el-input>
        </el-form-item>
        <el-form-item label="头像" prop="headPic">
          <oss ref="oss3" :imgurl.sync="ruleForm.headPic"></oss>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveOrUpdate()">提交</el-button>
          <el-button  @click="resetForm()">重置</el-button>
          <el-button @click="fenRoleDialog =false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>

import ossone from "@/components/ossone"

export default {
  name: "Client",
  //声明组件
  components: {
    oss: ossone
  },

  data(){
    return {
      //条件搜索对象
      clientSelect:{},
      //表格数据
      tableData:[],
      //每页显示的条数
      pageSize: 5,
      //当前的显示的页码
      currentPage:1,
      //总条数
      total:0,
      //分配角色框的显示
      fenRoleDialog:false,
      //表单元素
      ruleForm:{},
      //表单校验规则
      rules: {
        username: [
          { required: true, message: '请输入会员账号', trigger: 'blur' },
        ],
        contactName:[{pattern :/^[\u4e00-\u9fa5]{0,}$/,message: '请输入正确的姓名', trigger: 'blur'}],
        contactPhone:[{pattern: /^1[34578]\d{9}$/,message: '请输入正确的手机号', trigger: 'blur'}],
        phoneNum: [{ pattern: /^1[34578]\d{9}$/,message: '请输入正确的手机号', trigger: 'blur'}],
        email:[{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }],
        accountBalance:[{pattern:/^[1-9][0-9]*$/,message: '请输入正确的金额', trigger: 'blur'}],
        integration:[{pattern:/^[1-9]\d*$/,message: '请输入非零正整数', trigger: 'blur'}],
        growth:[{pattern:/^[0-9]+(\.[0-9]{2})?$/,message: '非零开头的正实数', trigger: 'blur'}],
        historyIntegration:[{pattern:/^[1-9]\d*$/,message: '请输入非零正整数', trigger: 'blur'}],
      },
      //会员等级数据
      levels:[],
      levellist:{},
      titleName:"",
      multipleSelection: []
    }
  },
  //加载玩调用
  created() {
    this.initUserTable();
    this.getLevel()
  },

  methods:{
    handleClose(){
    },
    //重置表单
     resetForm() {
       this.ruleForm = {}
      this.$nextTick(function() {
        this.$refs.ruleFormRef.clearValidate();
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //1.初始化用户列表
    initUserTable(){
      var that= this;
      this.$http.post(`/members/client/get/${this.currentPage}/${this.pageSize}`,this.clientSelect).then(function (r) {
        that.tableData=r.data.result.records;
        that.total=r.data.result.total;
      })
    },
    //切换用户状态
    switchStatus(data){
      this.ruleForm=JSON.parse(JSON.stringify(data))
      this.saveOrUpdate()
    },
    // 点击添加
     add(){
      this.$nextTick(function(){
        this.resetForm();
      })
       this.titleName="添加";
       this.fenRoleDialog=true;



      //清空表单 不要使用 this.resetForm()会出现页面刚加载时点击添加，表单输入数据不显示的bug

    },
    //点击修改弹出修改的弹出窗
    updateClient(data){
      this.titleName="修改"
      this.ruleForm=JSON.parse(JSON.stringify(data));
      this.$nextTick(function() {
        this.$refs.ruleFormRef.clearValidate();
      })
      this.fenRoleDialog=true;


    },
    //确认提交
    saveOrUpdate(){
      this.$refs.ruleFormRef.validate((valid) => {
        if (valid) {
          let that =this;
          this.$http.post("/members/client/saveOrUpdate",this.ruleForm).then(function (r) {
            that.fenRoleDialog=false;
            that.$message.success(r.data.message)
            that.initUserTable();
          })
        } else {
          this.$message.error("请输入完整的信息")
          return false;
        }
      });

    },
    //当改变没有显示的条数时触发该方法
    handleSizeChange(y){
      this.pageSize=y;
      this.initUserTable();
    },
    //切换页码时触发该方法
    handleCurrentChange(y){
      this.currentPage=y;
      this.initUserTable();
    },
    // 点击删除弹出确认窗口
    open(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.deleteById(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //删除的方法
    deleteById(id){
      let that=this
      this.$http.delete(`/members/client/delectById/${id}`).then(function (r){
        that.$message.success(r.data.message)
        that.initUserTable();
      })
    },
    // 获取level
    getLevel(){
      let that=this;
      this.$http.post("/members/level/get").then(function (r){
        that.levels=r.data.result.levels;
      })
    }
  }
}
</script>

<style scoped>

</style>
